<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图</title>
    <script src="./js/package/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 360px;height:270px;background-color:#301f63;"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            }
        },
        toolbox: {
            show: false,
        },
        grid:{
            show:false,
            top:'20%' //控制图标和上面的距离
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine:{
                lineStyle:{
                    color:'#703dbe' //x轴的颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: { //坐标轴刻度标签相关设置
                margin:0,
                formatter: '{value}\n',
                inside:true,
                color:"#5432a0"
            },
            axisPointer: {
                snap: true
            },
            axisLine:{
                lineStyle:{
                    color:'none' //y轴的颜色 
                }
            },
            splitLine:{
                lineStyle:{
                    color:['#402c74'] //分割线颜色
                }
            }
        },
        
        series: [
            {
                // name: 'aggie',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: [50, 280, 500, 100, 270, 300, 550],
                lineStyle:{
                    color:"#daaa44"  //线颜色
                },
                itemStyle:{
                    color:"#fbb306", //折点颜色
                },
                areaStyle:{
                    color:"#f7e239", //折现下方填充
                    //渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(227,190,55,0.5)'
                    },
                    {
                        offset: 0.5,
                        color: 'rgba(227,190,55,0.3)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(227,190,55,0.1)'
                    }
                    ])
                }
            }
        ]
        };

        option && myChart.setOption(option);
    </script>
</body>
</html>